<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>甜菜智能个性化作业系统</title>

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <!-- <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">-->

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">
    <style>

        .middle {

            float: none;

            display: inline-block;

            vertical-align: middle;

        }
    </style>

</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">


    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <!-- Topbar -->
            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

                <!-- Sidebar Toggle (Topbar) -->
                <h5 align="center" style="width: 100%"> 甜菜智能个性化作业系统</h5>


            </nav>
            <!-- End of Topbar -->

            <!-- Begin Page Content -->
            <div class="container-fluid">

                <!-- Page Heading -->
                <div id="user-lib">

                    <div class="row">

                        <div class="col-lg-1 d-flex justify-content-center align-items-center w-100">
                            <label>1</label>
                        </div>
                        <div class="col-lg-7">
                            <div class="card border-left-primary">

                                <div class="card-body">
                                    <img src="img/user_lib/1.png">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 d-flex justify-content-center align-items-center w-100">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk1" value="1">
                                        <label class="form-check-label">正确</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk1" value="2">
                                        <label class="form-check-label">错误</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk1" value="3">
                                        <label class="form-check-label">半对</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">

                        <div class="col-lg-1 d-flex justify-content-center align-items-center w-100">
                            <label>2</label>
                        </div>
                        <div class="col-lg-7">
                            <div class="card border-left-primary">

                                <div class="card-body">
                                    <img src="img/user_lib/1.png">
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 d-flex justify-content-center align-items-center w-100">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="inlineCheckbox1" value="1">
                                        <label class="form-check-label" for="inlineCheckbox1">正确</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="inlineCheckbox2" value="2">
                                        <label class="form-check-label" for="inlineCheckbox2">错误</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" id="inlineCheckbox3" value="3">
                                        <label class="form-check-label" for="inlineCheckbox3">半对</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"
                     style="margin-top: 10px">

                    <a href="#" class="btn btn-light btn-icon-split">
                    <span class="icon text-gray-600">
                      <i class="fas fa-print"></i>
                    </span>
                        <span class="text">打印</span>
                    </a>

                    <a href="#" class="btn btn-light btn-icon-split">
                    <span class="icon text-gray-600">
                      <i class="fas fa-info"></i>
                    </span>
                        <span class="text">查看答案</span>
                    </a>

                    <a href="#" onclick="javascript:genPaper();" class="btn btn-info btn-icon-split">
                    <span class="icon text-white-50">
                      <i class="fas fa-archive"></i>
                    </span>
                        <span class="text">生成个性化试卷</span>
                    </a>

                </div>

            </div>
            <!-- /.container-fluid -->


        </div>
        <!-- End of Main Content -->

        <!-- Footer -->
        <footer class="sticky-footer bg-white">
            <div class="container my-auto">
                <div class="copyright text-center my-auto">
                    <span>Copyright &copy; 甜菜教育 2019</span>
                </div>
            </div>
        </footer>
        <!-- End of Footer -->

    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {
    window.module = module;
    module = undefined;
}</script>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
<script>
    var elerem = require('electron').remote;
    var dialog = elerem.dialog;
    var app = elerem.app;

    var http = require('http');
    var fs = require('fs');
    var path = require('path');

    function getUserLibImgs() {
        return ["img/user_lib/1.png", "img/user_lib/2.png", "img/user_lib/3.png"]
    }

    function createRow(idx, img) {
        var num = idx + 1;
        var html = `
                    <div class="row">
                   <div class="col-lg-1 d-flex justify-content-center align-items-center w-100">
                            <label>${num}</label>
                        </div>
                        <div class="col-lg-7">
                            <div class="card border-left-primary">

                                <div class="card-body">
                                    <img src="${img}">
                                </div>
                            </div>
                        </div>
                     <div class="col-lg-4 d-flex justify-content-center align-items-center w-100">
                            <div class="card">
                                <div class="card-body">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk${idx}" value="1">
                                        <label class="form-check-label">正确</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk${idx}" value="2">
                                        <label class="form-check-label">错误</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="chk${idx}" value="3">
                                        <label class="form-check-label">半对</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

        `;
        return html
    }

    function saveAsDialog(remoteUrl) {
        // app.getPath("desktop")       // User's Desktop folder
        // app.getPath("documents")     // User's "My Documents" folder
        // app.getPath("downloads")     // User's Downloads folder

        var toLocalPath = path.resolve(app.getPath("desktop"), path.basename(remoteUrl));

        var userChosenPath = dialog.showSaveDialog({defaultPath: toLocalPath});

        if (userChosenPath) {
            copyFile(remoteUrl, userChosenPath);

        }


    }

    function copyFile(src, dest) {

        let readStream = fs.createReadStream(src);

        readStream.once('error', (err) => {
            console.log(err);
        });

        readStream.once('end', () => {
            console.log('done copying');
        });

        readStream.pipe(fs.createWriteStream(dest));
    }

    function genPaper() {
        console.log("gen papaer start");
        var selectValues = [];
        var rows = $('#user-lib .row');
        for (let row of rows) {
            let value = $(row).find("input[type=radio]:checked").val();
            if (!value) {
                value = "1";
            }
            selectValues.push(value);
            console.log(selectValues);
        }

        var exportImages = getExpotrImageFiles(selectValues);
        //let srcFile = path.resolve(__dirname, "./img/sys_lib/1-1.png");
        createDocx(exportImages).then((docFile)=>{
            saveAsDialog(docFile);
        });
    }

    function getExpotrImageFiles(selectValues) {
        var dstFiles = [];
        for(var i=0;i< selectValues.length;i++){
            var s = selectValues[i];
            var f1 = (i+1)+"-"+s+".png";
            var f2 = (i+1)+"-1.png";
            let srcFile = path.resolve(__dirname, "./img/sys_lib/"+f1);
            let defaultFile = path.resolve(__dirname, "./img/sys_lib/"+f2);
            if(fs.existsSync(srcFile)){
                dstFiles.push(srcFile);
            } else if(fs.existsSync(defaultFile)){
                //找不到，添加默认的
                dstFiles.push(defaultFile);
            }
        }
        return dstFiles;
    }

    function createDocx(images) {
        console.log(images);
        var docx = require("docx");
        var sizeOf = require('image-size');

        var doc = new docx.Document();
        var paragraph = new docx.Paragraph();
        paragraph.heading1().center();
        paragraph.addRun(new docx.TextRun("精选试题"));
        doc.addParagraph(paragraph);

        for(let img of images) {
            var dim = sizeOf(img);
            console.log(dim);
            doc.createImage(fs.readFileSync(img),dim.width,dim.height);

            var p = new docx.Paragraph();
            doc.addParagraph(p);
        }

        var packer = new docx.Packer();

        return new Promise((resolve, reject) => {
            packer.toBuffer(doc).then((buffer) => {
                let docFile = path.resolve(__dirname, "result.docx");
                fs.writeFileSync(docFile, buffer);
                resolve(docFile);
            });
        });


    }

    function initByUserLib() {
        var userLibDiv = $('#user-lib');
        var imgs = getUserLibImgs();
        for (var i = 0; i < imgs.length; i++) {

            let rowHtml = createRow(i, imgs[i]);
            userLibDiv.append(rowHtml);
        }
    }

    $('document').ready(function () {
        console.log("ready");
        $('#user-lib').empty();
        initByUserLib();
    });
</script>

</body>

</html>
